<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>单据号</span>
        <el-input v-model="tempData.danjuhao" class="userselect" type="text" placeholder="请输入单据号"/>
      </p>
      <p>
        <span>单据日期</span>
        <el-input v-model="tempData.danjuriqi" class="userselect" type="text" placeholder="请输入单据日期" />
      </p>
			<p>
        <span>业务员</span>
        <el-input v-model="tempData.yewuyuan" class="userselect" type="text" placeholder="请输入业务员" />
      </p>
			<p>
        <span>收获客户</span>
        <el-input v-model="tempData.shouhuokehu" class="userselect" type="text" placeholder="请输入收获客户" />
      </p>
			<p>
        <span>物料名称</span>
        <el-input v-model="tempData.wuliaomingcheng" type="text" class="userselect" placeholder="请输入物料名称" />
      </p>
			<p>
        <span>包装物</span>
        <el-input v-model="tempData.bzw" type="text" class="userselect" placeholder="请输入包装物" />
      </p>
			<p>
        <span>数量</span>
        <el-input v-model="tempData.shuliang" type="number" class="userselect" placeholder="请输入数量" />
      </p>
      <p>
        <span>含税单价</span>
        <el-input v-model="tempData.hanshuidanjia" type="text" class="userselect" placeholder="请输入含税单价" />
      </p>
      <p>
        <span>价税合计</span>
        <el-input v-model="tempData.jiashuiheji" type="text" class="userselect" placeholder="请输入价税合计" />
      </p>
      <p>
        <span>打托缠膜</span>
        <el-input v-model="tempData.chanmofeiyong" type="text" class="userselect" placeholder="请输入打托缠膜费用" />
      </p>
      <p>
        <span>运输方式</span>
        <el-input v-model="tempData.fangshi" type="text" class="userselect" placeholder="请输入运输方式" />
      </p>
      <p>
        <span>运输单价</span>
        <el-input v-model="tempData.yunshudanjia" type="text" class="userselect" placeholder="请输入运输单价" />
      </p>
      <p>
        <span>包装费用</span>
        <el-input v-model="tempData.bhbz" type="text" class="userselect" placeholder="请输入包装费用" />
      </p>
      <p>
        <span>新客户</span>
        <el-input v-model="tempData.shifouweixinkehu" type="text" class="userselect" placeholder="请输入新客户" />
      </p>
      <p>
        <span>收款协议</span>
        <el-input v-model="tempData.shoukuanxieyi" type="text" class="userselect" placeholder="请输入收款协议" />
      </p>
      <p>
        <span>佣金</span>
        <el-input v-model="tempData.yongjin" type="text" class="userselect" placeholder="请输入佣金" />
      </p>
      <p>
        <span>佣金比例</span>
        <el-input v-model="tempData.yongjinbili" type="text" class="userselect" placeholder="请输入佣金比例" />
      </p>
      <p>
        <span>id</span>
        <el-input v-model="tempData.id" disabled type="text" class="userselect" placeholder="请输入id" />
      </p>
    </div>
		<div class="submits">
		  <div class="save" @click="save" :class="isClick" v-if="!islook">保存</div>
      <div class="save" @click="nosave" v-if="islook">返回</div>
		  <!-- <div class="nosave" @click="nosave">取消</div> -->
		</div>
  </div>
</template>

<script>
import { updateFahuo,addFahuo } from '@/api/neimao'
export default {
  data(){
    return{
      tempData: {},
      writeOradd: 0,   //新增0,修改1
      islook: false,
      isClick: false
    }
  },
  mounted(){
    console.log(this.$route.params)
    if(this.$route.params.look){
      this.islook = true
    }else{
      this.islook = false
    }
    if(this.$route.params.options){
      this.tempData = JSON.parse(this.$route.params.options)
      console.log(this.tempData)
      this.writeOradd = 1
    }else{
      this.writeOradd = 0
    }
  },
  methods:{
    save(){
      this.isClick = true
      if(this.writeOradd == 0){
        addFahuo(this.tempData).then(res => {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
          console.log(res)
        }).catch(() => {
          this.isClick = false
        })
      }else{
        updateFahuo(this.tempData).then(res => {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
          console.log(res)
        }).catch(() => {
          this.isClick = false
        })
      }
    },
    nosave(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
  .submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
  .change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
</style>